<template>
  <info-window
    class="info-window"
    info-width="100%"
    info-height="100%"
    header-align="center"
    header-title="问题回复"
    style="flex: 1;"
    body-class="reply-info"
  >
    <div :class="{ 'reply-form': true, 'reply-form-dark': mode }">
      <page-panel-new
        v-for="(item, index) in model.replyList"
        :key="index"
        class="reply-item"
        :show-btn="false"
      >
        <el-container>
          <el-aside
            class="item-aside"
            width="140px"
          >
            <div class="ceshi" />
            <div class="head-sculpture">
              {{ index === 0 ? item.initiatorName?.[0] || "" : item.processorName?.[0] || "" }}
            </div>
            <el-tag
              v-if="index === 0 || item.processorName === model.initiatorName"
              size="small"
            >
              发起人
            </el-tag>
            <span>{{ index === 0 ? item.initiatorName : item.processorName }}</span>
          </el-aside>
          <el-container>
            <el-header
              class="item-header"
              height="40px"
            >
              {{ index === 0 ? `发起时间: ${item.initiatorTime}` : `回复时间: ${item.processorTime}` }}
            </el-header>
            <el-main class="item-main">
              <p class="content-text">
                <input-rich-form
                  :content-key="contentKey"
                  :get-model="getModel(item)"
                  :need-token="true"
                  :download-fn="downFile"
                />
              </p>
              <div
                v-if="item.orderAttachment"
                class="content-upload"
              >
                <file-upload
                  :value="item.orderAttachment"
                  :limit="5"
                  :is-show-tip="false"
                  :drag="false"
                  :view-only="true"
                  biz-path="approve/oo-csc-upp-approve-atom"
                  upload-type="minio"
                  style="display: inline-block;"
                />
              </div>
            </el-main>
          </el-container>
        </el-container>
      </page-panel-new>
    </div>
  </info-window>
</template>

<script>
import InfoWindow from "@/components/mainEntrance/info-window/index.vue";
import FileUpload from "@/components/mainEntrance/FileUpload/index.vue";
import InputRichForm from "@/components/inputRich/InputRichForm.vue";

import { useInputRichMixins } from "@/components/inputRich/mixins/useInputRichMixins.js";

export default {
  name: "ReplyInfo",
  components: {
    InfoWindow,
    FileUpload,
    InputRichForm
  },
  mixins: [useInputRichMixins],
  props: {
    model: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      contentKey: "loading"
    };
  },
  computed: {
    mode() {
      return this.$store.getters["setting/mode"] === "dark";
    },
    isView() {
      return this.$route.params.action === "View";
    }
  },
  watch: {
    model(val) {
      if (val) {
        this.contentKey = Date.now().toString();
      }
    }
  },
  methods: {
    getModel(item) {
      return () => Promise.resolve({
        "content": decodeURI(item?.orderContext) || ""
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .infoBody {
  overflow-y: auto;
}

.reply-form {
  padding: 20px;
  font-size: 14px;

  .reply-item {
    margin-top: 0;
    margin-bottom: 20px;

    /deep/ .g-w100 {
      padding: 0 !important;

      .item-aside {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
        padding: 20px 0;
        border-right: 1px solid #e6ebf5;
        background-color: #f8f9fc;

        .head-sculpture {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background-color: var(--light-blue-color);
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
          font-weight: bolder;
          color: #fff;
        }
      }

      .item-header {
        width: 100%;
        padding-right: 10px;
        line-height: 40px;
        color: var(--light-blue-color);
        border-bottom: 1px solid #e6ebf5;
        text-align: end;
      }

      .item-main {
        .content-text {
          color: var(--light-blue-color);
          word-break: break-all;

          .mce-content-body {
            img {
              max-width: 450px;
              object-fit: contain;
            }
          }
        }

        .content-upload {
          background-color: #f8f9fc;

          .el-link {
            font-size: 12px;
          }
        }
      }
    }
  }
}

.reply-form-dark {
  .item-aside {
    border-image: linear-gradient(180deg, #2e5b7c, #01aaf2) 3 3;
    background: linear-gradient(rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0)) !important;
    position: relative;
  }

  .item-header {
    border-image: linear-gradient(180deg, #2e5b7c, #01aaf2) 3 3;
  }

  .item-main {
    .content-upload {
      background-color: transparent !important;
      border: none;
    }
  }
}
</style>